
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>Damon UI</title>
    
    <link rel="stylesheet" href="../assets/css/dm.css">
    
 
    <style>
    /*html {font-size: 20px;}*/
    .wrapper {
    /*max-width: 640px;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;*/
    
    margin: 10px;
    border-color: #ddd;
    border:1px solid #ddd;
    padding: 10px;
    
}
.wrapper >section {
    margin-bottom: 10px;
}
.wrapper1 {
    background-color: #f7f7f7;
    padding: 15px 0;
}






    </style>
</head>
<body class="">
<h1>dm</h1><i class="iconfont icon-gear"></i>
<div class="wrapper">
    <div class="dm-flex dm-flex-wrap">
        <div style="width:33.33%">
            <div class="dm-bg" style="height: 50px;margin: 3px;">1</div>
        </div>
        <div style="width:33.33%">
            <div class="dm-bg" style="height: 50px;margin: 3px;">2</div>
        </div>
        <div style="width:33.33%">
            <div class="dm-bg" style="height: 50px;margin: 3px;">3</div>
        </div>
        <div style="width:33.33%">
            <div class="dm-bg" style="height: 50px;margin: 3px;">4</div>
        </div>
    </div>
</div>

<div class="wrapper" style="">
    <div class="tab-wrapper" style="margin: 0 15px;padding: 0">
        <div class="dm-tab-group">
            <a href="javascript:;" class="dm-tab-item ">空1虚</a>
            <a href="javascript:;" class="dm-tab-item ">寂1寞</a>
            <a href="javascript:;" class="dm-tab-item active">冷</a>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="tab-wrapper" style="margin: 0 15px;">
        <div class="dm-btn-group bordered">
            <a href="javascript:;" class="dm-btn-item ">空虚</a>
            <a href="javascript:;" class="dm-btn-item ">寂寞</a>
            <a href="javascript:;" class="dm-btn-item active">冷</a>
        </div>
    </div>
</div>
<div class="wrapper" >
    <div class="tab-wrapper" style="margin: 0 15px;font-size: 24px;">
        <div class="dm-btn-group">
            <a href="javascript:;" class="dm-btn-item ">空虚</a>
            <a href="javascript:;" class="dm-btn-item active">寂寞</a>
            <a href="javascript:;" class="dm-btn-item ">冷</a>
        </div>
    </div>
</div>
<!-- form -->
<div class="wrapper1">
    <div class="app-wrapper dm-flex dm-flex-column" style="height: 600px;padding: 12px 0;border:1px solid #000">
        
        <div class="dm-flex-1">
            <form action="" id="f1">
                <div class="dm-panel">
                    <div class="dm-flex aic">
                        <div class="dm-flex-1">沙打飞机师傅师傅就是打开</div>
                        <div>arrow</div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="dm-flex-1">沙打飞机师傅师傅就是打开</div>
                        <div>arrow</div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="dm-flex-1">沙打飞机师傅师傅就是打开</div>
                        <div>arrow</div>
                    </div>
                </div>
                <div class="dm-panel">
                    
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">机主姓名</div>
                        <div class="dm-flex-1">
                            <input type="text" class="dm-input line" placeholder="请填写">
                        </div>
                        <div class="">
                            <i class="iconfont icon-times-circle-fill dm-c-d dm-fz-x-large"></i>
                        </div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">身份证号码</div>
                        <div class="dm-flex-1">
                            <input type="text" class="dm-input line" placeholder="请填写身份证号码">
                        </div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">手机号码</div>
                        <div class="dm-flex-1">
                            <input type="tel" class="dm-input line" placeholder="请填写手机号码">
                        </div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">服务密码</div>
                        <div class="dm-flex-1">
                            <input type="text" class="dm-input line" placeholder="请填写服务密码">
                        </div>
                        <div style="" class="dm-c-d">
                            <i class="iconfont icon-eye dm-fz-xx-large"></i>
                        </div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">switch</div>
                        <div class="dm-flex-1">
                            <input type="text" class="dm-input line" placeholder="" disabled="">
                        </div>
                        <div style="" class="">
                            <label class="dm-switch">
                                <input type="checkbox" class="dm-switch-input dm-ghost">
                                <div class="dm-switch-box"></div>
                            </label>
                        </div>
                    </div>
                    <div class="dm-flex aic">
                        <div class="" style="width: 6em;">短信验证码</div>
                        <div class="dm-flex-1">
                            <input type="text" class="dm-input line" placeholder="请填写短信验证码">
                        </div>
                        <div class="">
                            <button type="button" class="dm-btn dm-btn-primary">点击获取</button>
                        </div>
                    </div>

                </div>
                <div class="dm-tac dm-m-7">
                    <div class="">
                        <label class="dm-check-wrapper">
                            <span class="dm-check">
                                <input type="checkbox" class="dm-check-input" name="dd" value="1" id="dd1" checked="" >
                                <span class="dm-dummy-check circle" ></span> 
                            </span>
                            <span>同意</span>
                        </label>
                              
                        
                        <label class="dm-check-wrapper">
                            <span class="dm-check">
                                <input type="checkbox" class="dm-check-input" name="aa" checked="" disabled="" >
                                <span class="dm-dummy-check" ></span> 
                            </span>

                        </label>
                        <label class="dm-check-wrapper">
                            <span class="dm-check">
                                <input type="checkbox" class="dm-check-input" name="aaa" checked=""  >
                                <span class="dm-dummy-radio" ></span> 
                            </span>
                            
                        </label>
                        <a class="dm-c-primary" href="javascript:;">《电信运营商数据采集服务协议》</a>
                      
                    </div>
                </div>
                <div class="dm-tac dm-m-7">
                    <button type="button" class="dm-btn dm-btn-primary dm-w-100 dm-btn-large" disabled="">确认</button>
                </div>
                <div class="dm-mr-7 dm-ml-7 dm-flex space-between">
                    <a class="dm-c-primary" href="javascript:;">找回服务密码</a>
                    <a class="dm-c-primary" href="javascript:;">短讯</a>
                </div>
            </form>
        </div>
        <div class="app-footer dm-tac">
            copyright 2017
        </div>
    </div>
            
</div>



<div class="wrapper ">
    
    
    <section>
        <button class="dm-btn">btn</button>
        <button class="dm-btn dm-btn-primary" disabled="disabled">disabled</button>
        <button class="dm-btn dm-btn-athens">btn-athens</button>
        <button class="dm-btn dm-btn-primary">btn-primary</button>
        <button class="dm-btn dm-btn-danger">btn-danger</button>
        <button class="dm-btn dm-btn-success">btn-success</button>
        <button class="dm-btn dm-btn-warning">btn-warning</button>
        <button class="dm-btn dm-btn-info">btn-info</button>
        <button class="dm-btn dm-btn-gray">btn-gray</button>
        <button class="dm-btn dm-btn-text">btn-text</button>
        <button class="dm-btn dm-btn-smoke">btn-smoke</button>
        
        <button class="dm-btn dm-c-primary">btn-o.c-primary</button>
        <button class="dm-btn dm-c-danger">btn-o.c-danger</button>
        <button class="dm-btn dm-btn-small">btn-small</button>
        <button class="dm-btn dm-btn-tiny">btn-tiny</button>
        <button class="dm-btn dm-btn-large">btn-tiny</button>
        <button class="dm-btn dm-btn-square">btn-square</button>
        <a href="javascript:;" class="dm-btn">aaa</a>
        <button class="dm-btn dm-btn-primary dm-btn-full">btn-primary</button>

    </section>
    <section>
        <div class=" m-5 " style="padding: 7px;width: 50px;height: 50px;background-color: blue">
            <span class="bt">123</span>
        </div>
        <div class=" m-5 " style="padding: 7px;width: 50px;height: 50px;background-color: blue">
            <span class="br">123</span>
        </div>
        <div class=" m-5 " style="padding: 7px;width: 50px;height: 50px;background-color: blue">
            <span class="bb">123</span>
        </div>
        <div class=" m-5 " style="padding: 7px;width: 50px;height: 50px;background-color: blue">
            <span class="bl">123</span>
        </div>

    </section>
    <section>
        <h2>checkbox</h2>
        <div class="dm-check-tag">
            <span><input type="radio" name="a" id="a1">
            <label for="a1">111</label></span>
            <span>
                <input type="radio" name="a" id="a2">
                <label for="a2">222</label>
            </span> 
            
        </div>
        <div class="dm-check-tag dm-check-tag-o">
            <span><input type="radio" name="aa" id="aa1">
            <label for="aa1">111</label></span>
            <span>
                <input type="radio" name="aa" id="aa2">
                <label for="aa2">222</label>
            </span> 
            
        </div>
        <div class="dm-check-circle">
            <span class="">
                <input type="radio" name="b" id="b1" class="ghost-hidden">
                <label class="dummy-check" for="b1"></label>
                <label for="b1">b1</label>
                
            </span>
            <span class="">
                <input type="radio" name="b" id="b2">
                <label class="dummy-check" for="b2"></label>
                <label for="b2">b2</label>
            </span>
                
        </div>
        <div class="dm-check-square">
            <span class="">
                <input type="radio" name="b" id="c1" >
                <label class="dummy-check" for="c1"></label>
                <label for="c1">c1</label>
                
            </span>
            <span class="">
                <input type="radio" name="b" id="c2">
                <label class="dummy-check" for="c2"></label>
                <label for="c2">c2</label>
            </span>
                

        </div>

        <div class="dm-radio-circle">
            <span class="">
                <input type="radio" name="b" id="d1" >
                <label class="dummy-check" for="d1"></label>
                <label for="d1">d1</label>
                
            </span>
            <span class="">
                <input type="radio" name="b" id="d2">
                <label class="dummy-check" for="d2"></label>
                <label for="d2">d2</label>
            </span>
                
        </div>

        <div class="check-triangle">
            <span class="por dib">
                <input type="radio" name="b" id="e1" checked="" >
                <label class="" for="e1">我同意这个协议</label>
                <div class="icon-check-triangle">s</div>
                
                
            </span>
            <span class="por">
                <input type="radio" name="b" id="e">
                <label class="icon-check-triangle" for="e2">dsfsf</label>
                
            </span>
                
        </div>

        
    </section>
    <section>
        <span class="dm-tag dm-tag m-5">tag</span>
        <span class="dm-tag dm-tag-danger m-5">tag-danger</span>
        
        <span class="dm-tag dm-tag-gray m-5">tag-gray</span>
        
        
        <span class="dm-tag dm-tag-primary m-5">tag-primary</span>
        <span class="dm-tag dm-tag-success m-5">tag-success</span>
        <span class="dm-tag dm-tag-warning m-5">tag-warning</span>
      

    </section>
   

    <section>
        <div class="modal modal-alert fade in" style="z-index: 1;display: block; position: relative;">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">确认框</h4>
              </div>
              <div class="modal-body">
                <p>One fine body&hellip;</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </section>

    <section>
        <div class="modal modal-alert fade in" tabindex="-1" style="z-index: 1; display: block;position: relative;">
            <div class="modal-dialog" style="margin-top: 0px;">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="modal-success-body"><i class="if icon-check-circle"></i>
                            <div>操作成功</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="modal modal-alert fade in" tabindex="-1" style="z-index: 1; display: block;position: relative;">
            <div class="modal-dialog" style="margin-top: 0px;">
                <div class="modal-content">
                    <div class="modal-warning-body">
                        <i class="if icon-warning-circle"></i><div>警告</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section>
        <div class="modal modal-alert fade in" tabindex="-1" style="z-index: 1; display: block;position: relative;">
            <div class="modal-dialog" style="margin-top: 0px;">
                <div class="modal-content">
                    <div class="modal-error-body">
                        <i class="if icon-times-circle"></i><div>出错了</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </section>


    
</div>
<!-- <script src="http://std-bd-int.shuli.com/static/scripts/libs/zepto.min.js?v=1.6.2-SNAPSHOT_20170223023406"></script>
<script src="../assets/js/dm.js"></script> -->
<script>
    

</script>

</body>
</html>